@section('title', '菜单列表')
@section('header')

<div class="layui-inline">
    {if check_permission('add')}
    <button class="layui-btn layui-btn-sm layui-btn-normal addBtn" data-desc="添加菜单" data-url="{{url('add')}}"><i class="layui-icon">&#xe654;</i></button>
    {/if}
    <button class="layui-btn layui-btn-sm layui-btn-warm" type="button" data-title="刷新页面" id="btn-refresh"><i class="layui-icon">&#x1002;</i></button>
    <div class="layui-btn layui-btn-sm layui-btn-normal zkBtn" data-title="展开菜单"><i class="layui-icon">&#xe602;</i></div>
</div>

@endsection
@section('table')


<table id="table1" class="layui-table" lay-filter="table1"></table>



@endsection
@section('js')


<!-- 操作列 -->
<script type="text/html" id="oper-col">
    {if check_permission('add')}
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="add">添加子菜单</a>
    {/if}
    {if check_permission('edit')}
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
    {/if}
    {if check_permission('delete')}
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    {/if}
</script>

<script id="switchTpl" type="text/html">
    <input type="checkbox"  name="state" data-id="{{= d.id}}" value = "{{= d.state}}" lay-skin="switch" lay-text="开启|关闭" lay-filter="state" {{ d.state == '1' ? 'checked' : '' }}>
</script>

<script type="text/html" id="iconTpl">
    <i class="layui-icon layui-btn-sm">{{= d.icon }}</i>
</script>

<script type="text/html" id="sortTpl">
    <input type="number" name="number" autocomplete="off" class="layui-input" style="width: 50px; text-align: center; height: 30px; line-height:30px;" value="{{= d.sort }}" lay-event="sort" />
</script>

<script>
    layui.use(['layer', 'table', 'form', 'treetable', 'dialog'], function () {
        var $ = layui.jquery;
        var table = layui.table;
        var layer = layui.layer;
        var treetable = layui.treetable;
        var form = layui.form;
        var menuJson = {$menu_json};
        // 渲染表格
        var renderTable = function () {
            layer.load(2);
            treetable.render({
                treeColIndex: 1,
                treeSpid: 0,
                treeIdName: 'id',
                treePidName: 'parent_id',
                treeDefaultClose: true,
                treeLinkage: false,
                elem: '#table1',
//                url: '/main.json',
                data:menuJson,
                page: false,
                cols: [[
                    {field: 'id', title: 'ID', width:50},
                    {field: 'title', title: '菜单名称'},
                    {field: 'icon', title: '图标', templet: '#iconTpl'},
                    {field: 'sort', title: '排序', width:60, align:'center', edit:'text'},
                    {field: 'uri', title: 'URL'},
                    {field:'state', title:'启用状态', width:120, templet:"#switchTpl"},
                    {templet: '#oper-col', title: '操作'}
                ]],
                done: function () {
                    layer.closeAll('loading');
                }
            });
        };

        renderTable();
        $('#btn-expand').click(function () {
            treetable.expandAll('#table1');
        });

        $('#btn-fold').click(function () {
            treetable.foldAll('#table1');
        });

        $('#btn-refresh').click(function () {
            renderTable();
        }).mouseenter(function() {
            layer.tips($(this).attr('data-title'), $(this),{tips: [3, '#40455C']});
        });

        $('.zkBtn').click(function() {
            if($(this).attr('data-title')=='展开菜单'){
                $(this).attr('data-title','收缩菜单');
                $(this).html('<i class="layui-icon">&#xe61a;</i>');
                treetable.expandAll('#table1');
            }else{
                $(this).attr('data-title','展开菜单');
                $(this).html('<i class="layui-icon">&#xe602;</i>');
                treetable.foldAll('#table1');
            }
        }).mouseenter(function() {
            layer.tips($(this).attr('data-title'), $(this),{tips: [3, '#40455C']});
        })

        // 编辑触发以下方法，test为表格id
        table.on('edit(table1)', function(obj){
            var url = '{{url('sort')}}';
            $.get(url, {id:obj.data.id,sort:obj.data.sort}, function (data) {
                if (data.code == 200) {
                    layer.msg("排序更新成功");
                } else {
                    layer.msg(data.message);
                }
            }, 'json'
            );
        })

        form.on('switch(state)', function(obj){
            //根据业务判断是开启还是关闭
            var state = obj.elem.checked ? 1 : 0;
            var index  = obj.othis.parents('tr').attr("data-index");
            var id = $(obj.elem).attr('data-id');
            $.get("{{url('setState')}}",{"id":id,"state":state},function (res) {
                if(res.code = 200){
                    layer.msg("状态修改成功");
                }else{
                    layer.msg(res.message);
                }
            }, 'json');

          });


        //监听工具条
        table.on('tool(table1)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;

            if (layEvent === 'del') {
                var dialog = layui.dialog;
                dialog.confirm({
                    message:'您确定要进行删除吗？',
                    success:function(){
                        $.get('{{url('delete')}}', {id: data.id}, function (data) {
                            if (data.code == 200) {
                                layer.msg("删除成功");
                                window.location.reload();
                            } else {
                                layer.msg("删除失败");
                            }
                        }, 'json');
                    },
                    cancel:function(){
                        layer.msg('取消了')
                    }
		        });
            } else if (layEvent === 'edit') {
                //layer.msg('修改' + data.id);
                var iframeObj = $(window.frameElement).attr('name');
                var url = '{{url('edit')}}';
                if(url.indexOf('?')==-1){
                    url += '?id=' + data.id;
                }else{
                    url += '&id=' + data.id;
                }
                parent.page("修改菜单", url, iframeObj, '700px', '620px');
             } else if (layEvent === 'add') {
                //layer.msg('修改' + data.id);
                var iframeObj = $(window.frameElement).attr('name');
                var url = '{{url('add')}}';
                if(url.indexOf('?')==-1){
                    url += '?parent_id=' + data.id;
                }else{
                    url += '&parent_id=' + data.id;
                }
                parent.page("添加子菜单", url, iframeObj, '700px', '620px');
            }
        });
    });


</script>
@endsection
@extends('admin.common.list')
